{% extends "cashflow/base.html" %}
{% load humanize %}

{% block addition_header %}
<script src="/static/amcharts/amstock.js" type="text/javascript"></script>
<link rel="stylesheet" href="/static/amcharts/style.css" type="text/css">   
{% endblock %}



{% block toolbar %}
Overview
{% endblock %}


{% block content %}
<h2>Bill Incoming/Alert</h2>

<h2>Cash Flow (Last 90 day / <a href="#">change</a>)</h2>
Income : {{cash.income}} Expense : {{cash.expense}} Summaey : {{cash.summary}}
<div id="datachart" style="width: 100%; height: 250px;"></div>

<script type="text/javascript" charset="utf-8">
  var rawData = [
                {% for item in history %}{
                  datetime: new Date({{ item.datetime|date:"Y" }},{{ item.datetime|date:"m" }}-1,{{ item.datetime|date:"d" }}),
                  date: "{{ item.datetime|date:"Y-m-d" }}",
                  account: "{{item.account}}",
                  category: "{{item.category}}",
                  description: "{{item.description}}",
                  income: {% if item.income %}{{item.income}}{% else %}null{% endif %},
                  expense: {% if item.expense %}{{item.expense}}{% else %}null{% endif %},
                  balance: {{item.balance}}
                  }{% if not forloop.last %},{% endif %}
                {% endfor %}
                ];

  $(document).ready(function() {
    $('#datatable').dataTable( {
      "bProcessing": true,
      "aaData": rawData,
      "aoColumns": [
        { "sTitle": "Date",  "mDataProp": "date" },
        { "sTitle": "Account",  "mDataProp": "account" },
        { "sTitle": "Category",  "mDataProp": "category" },
        { "sTitle": "Description",  "mDataProp": "description" },
        { "sTitle": "Income",  "mDataProp": "income" },
        { "sTitle": "Expense",  "mDataProp": "expense" },
        { "sTitle": "Balance",  "mDataProp": "balance" }
      ]
    } );
  } );  
  
  
  

  // Parse data
  function groupDataByDate(rawData) {
      var chartData = [];
      var pdate;
      var pdatetime;
      var sum_income = 0;
      var sum_expense = 0;
      var last_balance = 0;
      for (var row in rawData ) {
          if (!pdate){
            pdate = rawData[row].date;
            pdatetime = rawData[row].datetime;
          }
          if (pdate != rawData[row].date){
          
            chartData.push({
                datetime: pdatetime,
                income: sum_income,
                expense: sum_expense,
                balance: last_balance
            });  
          
            pdate = rawData[row].date;
            pdatetime = rawData[row].datetime;
            sum_income = 0;
            sum_expense = 0;
            last_balance = 0;
            }
           
          sum_income += rawData[row].income;
          sum_expense += rawData[row].expense;
          last_balance = rawData[row].balance;
      }
      chartData.push({
          datetime: pdatetime,
          income: sum_income,
          expense: sum_expense,
          balance: last_balance
      });          
      return chartData;
  }    
    
  function groupDataIncomeByCategory(rawData) {
      var chartData = [];
      var listCategory = {};
      for (var row in rawData ) {
        if (rawData[row].income){
          if (!(rawData[row].category in listCategory)){
            listCategory[rawData[row].category] = rawData[row].income;
          } else {
            listCategory[rawData[row].category] += rawData[row].income;
          }
        }
      }       
      for (var row in listCategory ) {
        chartData.push({
            category: row,
            summary: listCategory[row]
        });   
      } 
      return chartData;
  }   

  function groupDataExpenseByCategory(rawData) {
      var chartData = [];
      var listCategory = {};
      for (var row in rawData ) {
        if (rawData[row].expense){
          if (!(rawData[row].category in listCategory)){
            listCategory[rawData[row].category] = rawData[row].expense;
          } else {
            listCategory[rawData[row].category] += rawData[row].expense;
          }
        }
      }       
      for (var row in listCategory ) {
        chartData.push({
            category: row,
            summary: listCategory[row]
        });   
      } 
      return chartData;
  }      
    
    
  // Summary Chart
  AmCharts.ready(function () {
    var chart;
    var chartData = groupDataByDate(rawData);
    
    
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.panEventsEnabled = true;
    chart.dataProvider = chartData;
    chart.categoryField = "datetime";
    chart.plotAreaBorderColor = "#DADADA";
    chart.plotAreaBorderAlpha = 1;
    chart.startDuration = 1;
    chart.columnSpacing = 0;

    // AXES
    // Category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set this to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to "DD"
    categoryAxis.dashLength = 2;
    categoryAxis.gridAlpha = 0.15;
    categoryAxis.axisColor = "#DADADA";      

    // Value
    var valueAxisBalance = new AmCharts.ValueAxis();
    valueAxisBalance.axisColor = "#FCD202";
    valueAxisBalance.axisThickness = 2;
    valueAxisBalance.gridAlpha = 0;
    valueAxisBalance.title = "Balance";
    chart.addValueAxis(valueAxisBalance);
    
    var valueAxisFlow = new AmCharts.ValueAxis();
    valueAxisFlow.position = "right";
    valueAxisFlow.axisColor = "#B0DE09";
    valueAxisFlow.axisThickness = 2;
    valueAxisFlow.gridAlpha = 0;
    valueAxisFlow.title = "Summary";
    chart.addValueAxis(valueAxisFlow);      

    // GRAPHS
    var graphIncome = new AmCharts.AmGraph();
    graphIncome.valueAxis = valueAxisFlow;
    graphIncome.type = "column";
    graphIncome.title = "Income";
    graphIncome.valueField = "income";
    graphIncome.balloonText = "Income:[[value]]";
    graphIncome.lineAlpha = 0;
    graphIncome.fillColors = "#B0DE09";
    graphIncome.fillAlphas = 1;
    chart.addGraph(graphIncome);

    var graphExpense = new AmCharts.AmGraph();
    graphExpense.valueAxis = valueAxisFlow;
    graphExpense.type = "column";
    graphExpense.title = "Expenses";
    graphExpense.valueField = "expense";
    graphExpense.balloonText = "Expenses:[[value]]";
    graphExpense.lineAlpha = 0;
    graphExpense.fillColors = "#FF6600";
    graphExpense.fillAlphas = 1;
    chart.addGraph(graphExpense);

    var graphBalance = new AmCharts.AmGraph();
    graphBalance.valueAxis = valueAxisBalance;
    graphBalance.type = "smoothedLine";
    graphBalance.title = "Balance";
    graphBalance.valueField = "balance";
    graphBalance.balloonText = "Balance:[[value]]";
    graphBalance.lineThickness = 4;
    graphBalance.bullet = "round";
    graphBalance.bulletSize = 12;
    graphBalance.bulletBorderColor = "#FFFFFF";
    graphBalance.bulletBorderThickness = 2; 
    graphBalance.lineColor = "#FCD202";
    graphBalance.negativeLineColor = "#FF6600";
    chart.addGraph(graphBalance);
              
    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.zoomable = false;
    chartCursor.cursorPosition = "mouse";
    chart.addChartCursor(chartCursor);
       
    // LEGEND
    var legend = new AmCharts.AmLegend();
    legend.position = "absolute";
    legend.top = "5px";
    legend.left = "10px";
    chart.addLegend(legend);

    // WRITE
    chart.write("datachart");
  });
    

</script>


<h2>Budget (JULY 2012)</h2>
<img src="/static/temp/mockup chart - budget 2.png" />

<h2>GOALS</h2>

<h2>WAYS TO SAVE</h2>

{% endblock %}